<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ include file="../perEvaluationResult/importhead.jsp" %>
<%@ page import = "model.*"%>
<%@ page import="util.properties.UserLoginStatus"%>
<!DOCTYPE html>
<html>
	<head>
		<%
			request.setCharacterEncoding("utf-8");
			String schoolname = request.getParameter("schoolname");
			String classname = request.getParameter("totalclassname");
			String checktime = request.getParameter("checktime");
			String classid = request.getParameter("classid");
			int checktypeid = Integer.parseInt(request.getParameter("checktypeid"));
		%>
		<meta charset="utf-8">
		<title>班级EPQ测评统计分析（维度分析）</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../layui/css/layui.css" media="all">
		<style>
			html,body{
				height: 100%;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
			}
			.classMHTLayer-top{
				height: 10%;
				line-height:10%;
				margin: 5px;
				border: 1px solid #BED5F3;
			}
			.classMHTLayer-top ul li{
				list-style: none;
				float: left;
				margin-left: 15px;
				margin-top: 10px;
				border-radius: 3px;
			}
			.classMHTLayer-top ul li button{
				background-color: #F8F8F8;
				border: 1px solid #BED5F3 !important;
			}
			.classMHTLayer-con{
				height: 80%;
				margin: 5px;
			}
			.classMHTLayer-con .left .top,.right .top{
				position: relative;
				padding-left: 10px;
				color: #183152;
				font-weight: bold;
				height: 35px;
				line-height: 35px;
				background: #E5EFFE;
				overflow: hidden;
			}
			.classMHTLayer-con .left{
				height: 100%;
				width: 49%;
				float: left;
				border: 1px solid #BED5F3;
			}
			.classMHTLayer-con .right{
				height: 100%;
				width: 50%;
				float: right;
				border: 1px solid #BED5F3;
			}
		</style>
	</head>
	<body>
		<div class="classMHTLayer-top">
			<ul>
				<li><button id="wqxE" class="layui-btn layui-btn-sm layui-btn-primary">外倾性(E)</button></li>
				<li><button id="sjzN" class="layui-btn layui-btn-sm layui-btn-primary">神经质(N)</button></li>
				<li><button id="jszP" class="layui-btn layui-btn-sm layui-btn-primary">精神质(P)</button></li>
				<li><button id="ysxL" class="layui-btn layui-btn-sm layui-btn-primary">掩饰性(L)</button></li>
			</ul>
		</div>
		<div class="classMHTLayer-con">
			<div class="left">
				<div class="top">
					<span><%=schoolname%><%=classname%><%=checktime%>测评统计报告</span>
				</div>
				<table class="layui-hide" id="tabclassMHTresult" lay-filter="tabclassMHTresult"></table>
			</div>
			<div class="right">
				<div class="top" style="margin-bottom:6px"></div>
				<div id="echarts" style="width: 550px;height:300px; backgroud:red"></div>
			</div>
		</div>
	</body>
	
	<script src="../js/jquery-3.3.1.js"></script>
	<script type="text/javascript" src="../lib/echarts.common.min.js"></script>
	<script src="../layui/layui.js"></script>
	<script src="../lib/jquery.cookie.js"></script>
    <script src="../lib/json2.js"></script>
	<script type="text/javascript">
	layui.use(['form','table'], function(){
		var form = layui.form;
		var table = layui.table;
		
		var queryCondtion = "";  //请求检索条件
	   	//初始值
	   	queryCondition = "checktypeid=<%=checktypeid%>";
		queryCondition+= "&itemname=外倾性（E）";
		queryCondition+="&classid=<%=classid%>"; 
		queryCondition+= "&checktime=<%=checktime%>";
		var chartTitle = "外倾性（E）";
		
		var myChart1;
		var option1;	
		
	    /*列表区结构设置结束*/
	   queryGridDate();
	   //下面是图表的生成
       // 基于准备好的dom，初始化echarts实例
       myChart1 = echarts.init(document.getElementById('echarts'));

        // 指定图表的配置项和数据
       option1 = {
		    title : {
		        text: '外倾性（E）',
		       
		        x:'center'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'right',
		        data: []
		    },
		    series : [
		        {
		            name: '访问来源',
		            type: 'pie',
		            radius : '55%',
		            center: ['50%', '60%'],
		            data:[],
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ],
		    animation:false
		};

	   // 使用刚指定的配置项和数据显示图表。
	   myChart1.setOption(option1);  
	    
       
       //根据用户输入条件查询数据
	   function queryGridDate(){
	   		table.render({
				elem: '#tabclassMHTresult',
				url: '../sysevaluationresult/getclassepqstatistable?'+queryCondition,
				title: '班级测评结果统计分析报告EPQ',
				skin: 'line',
				even: true,
				page: {
					layout: ['count',],
					groups: 5,
					limit:20,
					theme: '#1E9FFF'
				},
				cols: [
					[{
						type: 'numbers',
						title: '序号'
					}, {
						field: 'itemname',
						title: '维度',
						align: "center"
					}, {
						field: 'status',
						title: '程度分级',
						align: "center"
					}, {
						field: 'personcounter',
						title: '分之人数',
						align: "center"
					}, {
						field: 'checknumber',
						title: '测评总人数',
						align: "center"
					}, {
						field: 'rate',
						title: '比例',
						align: "center"
					}]
				]
			}); 
	   
			 //通过异步请求action实现数据的保存
	         $.post("../sysevaluationresult/getclassepqstatischart?"+queryCondition, null, function(data, status){ 
			         myChart1.setOption({
			         		title : {
					        text: chartTitle,
					       
					        x:'center'
					    },
				         	 legend: {
					        data: data.categories
					    },
					    series : [
					        {
					            data: data.values
					        }
					    ]
			         })
			 }, "json"); 
		} 
		
		$("#wqxE").click(function(){
			chartTitle="外倾性（E）";
	      	queryCondition = "checktypeid=<%=checktypeid%>";
			queryCondition+= "&itemname=外倾性（E）";
			queryCondition+="&classid=<%=classid%>"; 
			queryCondition+= "&checktime=<%=checktime%>";
			queryGridDate();
		});
		
		$("#sjzN").click(function(){
			chartTitle="神经质（N）";
	      	queryCondition = "checktypeid=<%=checktypeid%>";
			queryCondition+= "&itemname=神经质（N）";
			queryCondition+="&classid=<%=classid%>";
			queryCondition+= "&checktime=<%=checktime%>"; 
			queryGridDate();
		});
		
		$("#jszP").click(function(){
			chartTitle="精神质（P）";
	       	queryCondition = "checktypeid=<%=checktypeid%>";
			queryCondition+= "&itemname=精神质（P）";
			queryCondition+="&classid=<%=classid%>"; 
			queryCondition+= "&checktime=<%=checktime%>";
			queryGridDate();
		});
		
		$("#ysxL").click(function(){
			chartTitle="掩饰性（L）";
	       	queryCondition = "checktypeid=<%=checktypeid%>";
			queryCondition+= "&itemname=掩饰性（L）";
			queryCondition+="&classid=<%=classid%>"; 
			queryCondition+= "&checktime=<%=checktime%>";
			queryGridDate();
		});

	});

	</script>
</html>
